<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AutoGen Client</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
  </head>
  <body class="text-green-400 bg-black">
    <div class="container flex flex-col min-h-screen p-4 mx-auto">
      <div class="flex items-start justify-between">
        <h1 class="font-mono text-4xl">AutoGen Client</h1>
        <div class="flex flex-row mb-2">
          <button class="px-4 py-2 font-bold text-black bg-green-500 rounded hover:bg-green-700">Tab 1</button>
          <button class="px-4 py-2 ml-2 font-bold text-black bg-green-500 rounded hover:bg-green-700">Tab 2</button>
        </div>
      </div>
      <div class="flex flex-col flex-grow">
        <div
          id="chatBox"
          class="flex-grow p-4 overflow-y-auto font-mono text-sm bg-gray-800 rounded shadow-lg"
        >
          <!-- Chat messages will be appended here -->
        </div>
        <form id="chatForm" class="flex mt-4">
          <input
            type="text"
            id="messageInput"
            class="flex-grow p-2 font-mono text-white bg-gray-800 rounded shadow"
            placeholder="Type your message..."
            required
          />
          <button
            type="submit"
            class="px-4 py-2 ml-2 font-bold text-black bg-green-500 rounded hover:bg-green-700"
          >
            Send
          </button>
        </form>
      </div>

    <script>
      let ws = new WebSocket("ws://localhost:8999/ws");
      let chatForm = document.getElementById("chatForm");
      let messageInput = document.getElementById("messageInput");

      ws.onopen = function () {
        ws.send(
          JSON.stringify({
            action: "start_agent",
            agent_name: "assistant",
            message: "What are you and what is your purpose?",
          })
        );
      };

      ws.onmessage = function (event) {
        let chatBox = document.getElementById("chatBox");
        let message = document.createElement("p");
        console.log(event.data);
        message.textContent = "Agent: " + JSON.parse(event.data).message;
        chatBox.appendChild(message);
        chatBox.scrollTop = chatBox.scrollHeight;
      };

      chatForm.addEventListener("submit", function (event) {
        event.preventDefault();
        let message = messageInput.value;
        ws.send(
          JSON.stringify({
            action: "send_message",
            agent_name: "assistant",
            message: message,
          })
        );

        let chatBox = document.getElementById("chatBox");
        let userMessage = document.createElement("p");
        userMessage.textContent = "User: " + message;
        chatBox.appendChild(userMessage);
        chatBox.scrollTop = chatBox.scrollHeight;

        messageInput.value = "";
      });
    </script>
  </body>
</html>
